import React, { useState, useEffect } from "react";
import Crumbs from "../../components/crumbs/index";
import { Alert, Button, Space } from "antd";
import Icon from "@ant-design/icons";
import { getHome } from "../../api/home";
import {
  Shop_img,
  che_img,
  deal_img,
  hint_img,
  home_img,
  home_img_tow,
  home_img_three,
  home_img_4,
  home_img_5,
  home_img_6,
} from "../../public/cx/login/svg.jsx";
import "./scss/homeIndex.scss";

const homeIndex = (props) => {
  // useEffect(() => {
  //   getHome({ name: '123' }).then((res) => {
  //     console.log(res);
  //   });
  //   return () => {};
  // }, []);
  const shop_list = [
    {
      id: 1,
      icons: home_img,
      text: "首页轮播图",
    },
    {
      id: 2,
      icons: home_img_tow,
      text: "导航图标",
    },
    {
      id: 3,
      icons: home_img_three,
      text: "商品推荐",
    },
    {
      id: 4,
      icons: home_img_4,
      text: "公告管理",
    },
    {
      id: 5,
      icons: home_img_5,
      text: "退货地址管理",
    },
    {
      id: 6,
      icons: home_img,
      text: "分类管理",
    },
    {
      id: 7,
      icons: home_img_6,
      text: "一件上传商品",
    },
  ];

  const home_nav = (index) => {
    switch (index) {
      // 首页轮播图
      case 1:
        props.history.replace("/banner");
        console.log(props);
        break;
      case 2:
        props.history.replace("/navicon");
        console.log(props);
        break;
      case 3:
        props.history.replace("/recommend");
        console.log(props);
        break;
      case 4:
        props.history.replace("/notice");
        console.log(props);
        break;
      case 5:
        props.history.replace("/sales");
        console.log(props);
        break;
      case 6:
        props.history.replace("/classify");
        console.log(props);
        break;
      case 7:
        props.history.replace("/upload");
        console.log(props);
        break;
      default:
        break;
    }
  };
  return (
    <div>
      <Crumbs />
      <div className="worn">
        <Alert
          message="欢迎使用极致睿成后台管理系统(V1.2)"
          type="success"
          showIcon
          closable
        />
      </div>

      <div className="shop_list_pic">
        <div>
          {/* 头部 */}
          <div className="shop_title">
            <div className="icon" style={{ background: "#36cfca" }}>
              <Icon component={Shop_img} />
            </div>
            <div>
              <p>34522</p>
              <p>商城用户</p>
            </div>
          </div>
          {/* 列表内容 */}
          <div className="order">
            <div>订单统计信息</div>
            <div className="order_content">
              <span>待发货订单</span>
              <span>
                <strong>0</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>待发货订单:</span>
              <span>
                <strong>0</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>待结算订单:</span>
              <span>
                <strong>0</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>已成交订单数:</span>
              <span>
                <strong>0</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>交易失败:</span>
              <span>
                <strong>0</strong>个
              </span>
            </div>
          </div>
        </div>
        <div>
          {/* 头部 */}
          <div className="shop_title">
            <div className="icon" style={{ background: "#FFC53D" }}>
              <Icon component={che_img} />
            </div>
            <div>
              <p>34522</p>
              <p>商品订单</p>
            </div>
          </div>
          {/* 列表内容 */}
          <div className="order">
            <div>商品统计信息</div>
            <div className="order_content">
              <span>商品总数:</span>
              <span>
                <strong>340</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>回收站商品:</span>
              <span>
                <strong>10</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>上架商品:</span>
              <span>
                <strong>13</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>下架商品:</span>
              <span>
                <strong>26</strong>个
              </span>
            </div>
            <div className="order_content">
              <span>商品评论:</span>
              <span>
                <strong>2145</strong>条
              </span>
            </div>
          </div>
        </div>
        <div>
          {/* 头部 */}
          <div className="shop_title">
            <div className="icon" style={{ background: "#42A7FF" }}>
              <Icon component={deal_img} />
            </div>
            <div>
              <p>34522</p>
              <p>交易记录</p>
            </div>
          </div>
          {/* 列表内容 */}
          <div className="order">
            <div>最新消息</div>
            <div className="order_content">
              <span>
                <Icon component={hint_img} />
                XXX会员购买了XXXXXX商品
              </span>
            </div>
            <div className="order_content">
              <span>
                <Icon component={hint_img} />
                XXX会员购买了XXXXXX商品
              </span>
            </div>
            <div className="order_content">
              <span>
                <Icon component={hint_img} />
                XXX会员购买了XXXXXX商品
              </span>
            </div>
            <div className="order_content">
              <span>
                <Icon component={hint_img} />
                XXX会员购买了XXXXXX商品
              </span>
            </div>
            <div className="order_content">
              <span>
                <Icon component={hint_img} />
                XXX会员购买了XXXXXX商品
              </span>
            </div>
          </div>
        </div>
      </div>
      {/* 列表 */}
      <div>
        <ul className="nav">
          {shop_list.map((item, index) => {
            return (
              <li key={item.id} onClick={() => home_nav(item.id)}>
                <p>
                  <Icon component={item.icons} />
                </p>
                <p>{item.text}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default homeIndex;
